<template>
	<div class="wrap">
		<el-row>
			<el-col :span="24" :sm="18" :offset="offset">
				<div class="vip">
					<div class="vip-titleName">{{vipOpen?'会员信息':'开通精选VIP'}}</div>
					<div class="pay-success" v-if="vipOpen">
						<img src="../../assets/images/pay-succ.png" />
						<p style="text-align: center;line-height: 1.5em;">您已开通会员，<br>到期时间：<span style="color: #F56C6C;">{{userInfo.vipEndTime | formatDate}}</span></p>
					</div>
					<div class="vip-w" v-if="!vipOpen">
						<el-row justify="center">
							<el-col :span="12" :sm="6" v-for="(item,index) in vipList" :key="index">
								<div class="vip-center-box">
									<div class="vip-select" :class="{on:vipSelectIndex==index}" @click="itemClick(index)">
										<el-popover placement="bottom" width="130" trigger="hover" content="包含:经典起名,高分起名,诗词起名,五行字典" popper-class="vip-tips">
											<div class="vip-select-tips" slot="reference"></div>
										</el-popover>
										<p class="title">{{item.title}}</p>
										<p class="money">
											{{moneyZ(item.price)}}
											<span>元/年</span>
										</p>
										<p class="vip-desc">海量数据&nbsp;&nbsp;无限使用</p>
										<p class="vip-desc">数据分析&nbsp;&nbsp;1V1客服</p>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>

					<div class="vip-bottom-box" v-if="!vipOpen">
						<el-row type="flex" justify="center" align="middle">
							<el-col :span="13" :sm="5">
								<div class="pay-way">
									<div class="payable t">
										应付金额<span>&nbsp;{{money}}元</span>
									</div>
									<div class="pay-tips t">
										选择支付方式扫码支付
									</div>
									<div class="pay-icon-box ">
										<img src="../../assets/images/zfb.png" />
										<img src="../../assets/images/wx.png" />
									</div>
								</div>
							</el-col>
							<el-col :span="12" :sm="4">
								<div class="center">
									<div class="qr-box" id="ali">
										<!-- <img :src="aliQrCode" /> -->
									</div>
									<p class="qr-tips">使用<span style="color: red;">支付宝</span>扫码付款</p>
								</div>
							</el-col>
							<el-col :span="12" :sm="4">
								<div class="center">
									<div class="qr-box" id="wx">
										<!-- <img :src="aliQrCode" /> -->
									</div>
									<p class="qr-tips">使用<span style="color: red;">微信</span>扫码付款</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import QRCode from 'qrcode2';
	import {formatDate} from "@/util/util.js"
	export default {
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy年MM月dd日 hh:mm');
			}
		  },
		data() {
			return {
				offset: 3,
				vipSelectIndex: 0,
				money: 0,
				vipList:[],//vip套餐列表
				userInfo:{},//用户信息
				orderId:"",//订单ID
				aliQrCode:"",//支付宝二维码
				wxQrCode:"",//微信二维码
				timer:null,//轮询定时器
				vipOpen:false//是否已开通会员
			}
		},
		created() {
			// 获取套餐列表
			this.getList()
			let key=localStorage.getItem('key')
			if(key){
				this.getUserInfo()
			}
		},
		mounted() {
			let w = 0
			let that = this
			w = document.body.clientWidth
			window.onresize = () => {
				return (() => {
					w = document.body.clientWidth
					if (w < 450) {
						that.offset = 0
					} else {
						that.offset = 3
					}
				})()
			}
			if (w < 450) {
				that.offset = 0
			} else {
				that.offset = 3
			}
		},
		beforeDestroy(){
			clearTimeout(this.timer)
		},
		methods: {
			itemClick(e) {
				this.vipSelectIndex = e
				this.account()
				document.getElementById("wx").innerHTML = "";
				document.getElementById("ali").innerHTML = "";
				this.getQrcode()
			},
			// 获取用户信息
			getUserInfo() {
			    this.$ajax.post("/user/getInfo")
			        .then(res => {
			            this.userInfo = res.data.data;
						var that=this
						setTimeout(()=>{
							if(res.data.data.vipEndTime && res.data.data.vipEndTime!=null){
								sessionStorage.setItem("info", JSON.stringify(res.data.data));
								that.vipOpen=true
								return
							}
							that.$nextTick(()=>{
								that.getQrcode()
							})
						},200)
			        })
			},
			getList(){
				this.$ajax.get("/vipOrder/vipPackage")
				.then(res =>{
					if(res.data.code==0){
						let data=res.data.data
						this.vipList=data
						this.account()
					}
				})
			},
			getQrcode(){
				let vipId=this.vipList[this.vipSelectIndex].id
				this.$ajax.get(`/vipOrder/vipQrCode?userId=${this.userInfo.userId}&vipId=${vipId}`)
				.then(res =>{
					if(res.data.code==0){
						this.aliQrCode=new QRCode(document.getElementById('ali'),{
							width:130,
							height:130,
							text: res.data.data.aliQrCode
						})
						
						this.wxQrCode=new QRCode(document.getElementById('wx'),{
							width:130,
							height:130,
							text: res.data.data.wxQrCode
						})
						this.orderId=res.data.data.orderId
						clearTimeout(this.timer)
						this.interval()
						return
					}
					if(res.data.code==305){
						this.vipOpen=true
					}
				})
			},
			interval(){
				this.timer=setTimeout(()=>{
					this.getOrderStatus()
				},3000)
			},
			getOrderStatus(){
				this.$ajax.get(`/vipOrder/orderStatus?orderId=${this.orderId}`).then(res=>{
					clearTimeout(this.timer)
					if(res.data.data==1){
						this.vipOpen=true
						this.$store.commit('show', true)
						this.$nextTick(()=>{
							this.getUserInfo()
						})
						return
					}
					if(res.data.data==0){
						this.interval()
					}
				})
				
			},
			// 转换二维码
			qrCodeZ(e){
				return new QRCode('',{
					text: e
				})
			},
			// 金钱转换
			moneyZ(e){
				return e/100;
			},
			// 计算应付金额
			account(){
				this.money=this.vipList[this.vipSelectIndex].price/100
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 16px;
		background-color: rgb(241, 242, 249);
		color: #555;
		padding-bottom: 50px;
		padding-top: 50px;
		min-height: 68vh;

		.vip-w {
			width: 100%;
			padding: 50px 10px;
		}

		.pay-success{
			width: 100%;
			min-height: 400px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			p{
				margin-top: 30px;
				font-size: 20px;
			}
		}

		.vip {
			// width: 1200px;
			// height: 657px;
			width: 95%;
			overflow: hidden;
			border-radius: 20px;
			background: #ffffff;
			box-shadow: 0px 5px 50px rgba(192, 199, 219, 0.15);
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.vip-titleName {
				width: 100%;
				height: 70px;
				text-align: center;
				line-height: 70px;
				border-bottom: 1px solid #d7d7d7;
				font-size: 20px;
				color: #4f4f4f;
			}

			.vip-center-box {
				width: 100%;
				// padding: 50px 0;
				height: auto;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;

				.vip-select {
					width: 260px;
					height: auto;
					border: solid 2px #d7d7d7;
					border-radius: 20px;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 32px 0;
					margin: 5px 0;
					cursor: pointer;
					position: relative;

					&.on {
						border: 2px solid #405CDA !important;

						&:after {
							content: "✔";
							position: absolute;
							box-sizing: border-box;
							width: 50px;
							height: 50px;
							padding-left: 10px;
							padding-top: 10px;
							text-align: right;
							display: inline-flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							font-size: 1.375rem;
							color: #FFF;
							// font-weight: bold;
							right: -1px;
							bottom: -1px;
							background: url(../../assets/images/on-icon.png) top center no-repeat;
							background-size: 100%;
						}
					}

					.vip-select-tips {
						position: absolute;
						top: 15px;
						right: 15px;
						width: 22px;
						height: 22px;
						background: url(../../assets/images/vip-tips-icon.png) top center no-repeat;
						background-size: 100%;
					}

					.title {
						font-size: 1.25rem;
						color: #909090;
					}

					.money {
						line-height: 53px;
						font-size: 2.5rem;
						color: #405CDA;

						span {
							font-size: 20px;
						}
					}

					.vip-desc {
						font-size: 16px;
						color: #7D8EDA;
						line-height: 21px;
					}
				}
			}

			.vip-bottom-box {
				width: 100%;
				margin-bottom: 50px;

				.qr-box {
					width: 150px;
					height: 150px;
					padding: 10px;
					border: 1px solid #d7d7d7;

					img {
						width: 100%;
						height: 100%;
					}
				}

				// .pay-way{
				// 	display: flex;
				// 	flex-direction: row;
				// }
				.qr-tips {
					font-size: 16px;
					color: #4f4f4f;
					text-align: center;
					// line-height: 21px;
					margin-top: 10px;
				}

				.t {
					margin-top: 12px;
				}

				.pay-icon-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 20px;

					img {
						width: 40px;
						height: 40px;
						margin-right: 21px;
					}
				}

				.pay-tips {
					font-size: 16px;
					color: #a9a9a9;
				}

				.payable {
					font-size: 20px;
					color: #4f4f4f;

					span {
						font-size: 24px;
						color: #FF3939;
					}
				}

			}
		}
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	@media screen and (min-width:750px) {
		.vip-w{
			margin-left: 50%;
		}
	}
	@media screen and (max-width:450px) {
		.vip-center-box {
			padding: 10px 0 0 !important;
		}

		.vip-select {
			&.on {
				border: 2px solid #405CDA !important;

				&:after {
					width: 40px !important;
					height: 40px !important;
				}
			}
		}

		.vip-w {
			padding: 0 10px !important;

			.el-col {
				transform: scale(0.9);
				margin-top: -10px;
				margin-bottom: -10px;
			}
		}
		.vip-bottom-box .el-row{
			display: block!important;
			// flex-wrap: wrap!important;
		}
		.pay-way{
			margin-left: 20px;
		}
		.vip-bottom-box .el-row .el-col{
			margin: 10px 0;
		}
		// .vip-bottom-box .el-row {
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
		// 	.el-col {
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		margin: 10px 0;
		// 	}
		// }

	}
</style>
